.abnormal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;

    .top {
        margin-top: 10%;
        display: block;
        width: 600rpx;
        height: 600rpx;
        opacity: 0;
        animation-name: animationAbnormalImage;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    .bottom {
        width: 100%;

        .bottom-item {
            text-align: center;

            .bottom-item-animation {
                opacity: 0;
                animation-name: animationAbnormalTips;
                animation-duration: 0.5s;
                animation-fill-mode: forwards;
            }

            .bottom-item-num {
                color: #7490aa;
                font-size: 64rpx;
            }

            .bottom-item-title {
                margin: 32rpx 0 16rpx 0;
                font-size: 32rpx;
                color: #7490aa;
                animation-delay: 0.1s;
            }

            .bottom-item-msg {
                margin-bottom: 64rpx;
                font-size: 28rpx;
                color: #999;
                animation-delay: 0.2s;
            }

            .bottom-item-btn {
                display: flex;
                justify-content: center;
                animation-delay: 0.2s;

                .go-home-button {
                    margin: 0;
                    width: 240rpx;
                    background: #007aff;
                    color: #fff;
                    font-size: 30rpx;
                }

                .go-login-button {
                    margin: 0;
                    margin-left: 40rpx;
                    width: 240rpx;
                    background: #49d484;
                    color: #fff;
                    font-size: 30rpx;
                }
            }
        }
    }
}

// 异常页面图片出现动画
@keyframes animationAbnormalImage {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

// 异常页面提示出现动画
@keyframes animationAbnormalTips {
    0% {
        transform: translateY(60rpx);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
